<template>
  <div class="right_icon" style="overflow: visible;top: 0; bottom: 0;width: 2rem;height:2rem;" id="cartIcon"
       ref="cartIcon">
    <a class="shopping_cart" :class="{'card-bounce': isClass } " style="position: relative;z-index: 5;"
       @click="abc">
      <i class="icon njfont nj-gouwuche"></i>
      <div class="aui-badge">{{cartShowNumb|| 0}}</div>
    </a>
    <!--<div class="animate_ball_temp" ref="ballIcon">-->
    <!--<transition-group v-if="transitionName" :name="transitionName" style=" position:absolute;width: 2rem;height:2rem;pointer-events:none" @beforeLeave="leave">-->
    <!--<div class="animate_ball"  v-for=" item in array" :key="item">+{{addNum}}</div>-->
    <!--&lt;!&ndash;购物车动画 end&ndash;&gt;-->
    <!--</transition-group>-->
    <!--</div>-->
  </div>
</template>
<script>
  import {mapGetters} from "vuex";
  import {MessageBox} from '@/ui-components'
  import getConfig from '../../utils/CJY/getConfig'
  import { openApp } from '../../utils/ZWY/utils.js'
  export default {

    props: {
      isOffLine: false,
      goApp: {
        default: () => {}
      }
    },
    components: {
      transitionName: null
    },

    data() {
      return {
        isClass: false,
        transitionName: null,
        cartShowNumb: 0
      }
    },
    created() {
      this.cartShowNumb = this.cartNum
    },
    computed: {
      ...mapGetters({
        cartNum: 'cjy/cartTotalNum'  //购物车商品数量
      }),
      ...mapGetters(['cartConfig', 'storeConfigStatus']),
      //动画小球数组 改变值
      animateNum() {
        return this.$store.state.cjy.cartanimateNumber
      },
      //动画小球数组
      array() {
        return this.$store.state.cjy.cartanimateArray
      },
      goodsTrolleyType() {
        var getConfigParams = this.cartConfig || {}
        return getConfigParams.goodsTrolleyType || 0
      },


    },
    methods: {
      abc() {
        this.goApp()
      },
     async goToCart() {
        if(true) {
					this.$router.push({
						name: "MiddleWare",
					})
					return
				}
        if (this.storeConfigStatus == 'loaded') {
        } else if (this.storeConfigStatus == 'loading') {
          return
        } else {
          await getConfig()
          if (this.storeConfigStatus != 'loaded') {
            return
          }
        }

        var islocal = (/^localhost:8082+/gi).test(location.host) || this.goodsTrolleyType
        var isXiangpu = navigator.userAgent.indexOf("xiangpu") > -1;         //判断是否在象谱内打开
        if (!isXiangpu && !islocal ) {
          // MessageBox.confirm('', {title: "请使用App购买商品", message: "是否跳转到宁家鲜生App下载页面", cancelButtonText: '再看看'})
          //   .then(
          //     (res) => {
          //       this.toDownload()
          //     })
          this.toDownload()
          return
        }


        if (this.isOffLine) {
          this.$router.push({path: "cartForOffLine"});
        }
        this.$router.push({path: "cart"});
      },
      toDownload() {
        location.href = location.href.split('H5')[0] + 'download/index.html';
      },
      addAnimate() {
        setTimeout(() => {
          if (this.clearTimeOut) {
            clearTimeout(this.setTimeOut)
          }
          this.isClass = true
          this.setTimeOut = setTimeout(() => {
            this.isClass = false
          }, 480)
        }, 1800)

      },
      leave(ele, done) {

        var Y = this.$refs.cartIcon.getBoundingClientRect().top - this.$refs.ballIcon.getBoundingClientRect().top
        ele.style.WebkitTransform = `translateY(${Y - 10}px) scale(0.2,0.2)`
      }
    },
    watch: {
      cartNum(data, old) {
        this.isRefresh = false //是否触发延迟更新购物车数量
        if (data > old) {
          setTimeout(() => {
            this.cartShowNumb = data

          }, 1500)
        } else {
          this.cartShowNumb = data
          this.isRefresh = true //当点击减少时触发 延迟更新
        }
        setTimeout(
          () => {
            if (this.isRefresh) {
              this.cartShowNumb = this.cartNum //触发了减少那么将在 一段延迟后刷新数字 这个延迟大于 增加所需的延迟
            }
          }, 2000)

      },
      animateNum() {
        this.addAnimate()
      }
    },
    mounted() {
      // 将购物车图标位置翻入vuex中
      var cartIcon = {
        left: this.$refs.cartIcon.getBoundingClientRect().left,
        top: this.$refs.cartIcon.getBoundingClientRect().top
      }

      cartIcon.top && this.$store.commit('cjy/SET_CART_ICON', cartIcon)

      if (cartIcon.left < 150) {
        this.transitionName = "add-to-cart-left"

      } else {
        this.transitionName = "add-to-cart"

      }
    }


  }
</script>

<style scoped>
  .right_icon {
    right: 0;
  }

</style>


